/* 标题的字体样式 */
.base-title-font {
  font-family: "Noto Sans S Chinese";
  color: #C0C4CC;
  font-size: 14px;
}

/* 标题el样式 */
.base-header-title {
  height: 46px;
  line-height: 46px;
  font-family: "Noto Sans S Chinese";
  color: #C0C4CC;
  font-size: 14px;
  background-color: rgba(44, 254, 255, 0);
  padding-left: 30px;
  border-bottom: 1px solid rgba(58, 244, 245, 0);
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 15px;
    width: 4px;
    height: 14px;
    background: #f98b39;
    opacity: 1;
  }
}

/* el-input 自定义样式 */
.el-input__inner,
.el-textarea__inner {
  background: rgba(0, 0, 0, 0.1);
  // border: 1px solid rgba(58, 244, 245, 0);
  border-radius: 4px;
  font-size: 11px;
  color: #517377;
  font-family: "Noto Sans S Chinese";

  &::placeholder {
    font-size: 11px;
    color: #517377;
    font-family: "Noto Sans S Chinese";
  }
}

/*表单 el-select 自定义样式 */
.el-cascader .el-cascader__tags .el-tag,
.el-select .el-tag.el-tag--info {
  font-family: "Noto Sans S Chinese";
  color: #C0C4CC;
  font-size: 11px;
  background: rgba(44, 254, 255, 0);
  border: 1px solid #C0C4CC;
  height: 20px;
  line-height: 20px;
}

.el-cascader__tags .el-tag .el-icon-close {
  flex: none;
  color: #C0C4CC;
  font-size: 8px;
  margin-top: 2px;
}

.el-select .el-tag__close.el-icon-close {
  top: -2px;
  color: #C0C4CC;
}

/*修改表单必填标识颜色*/
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
  color: #f98b39;
}

/*.el-button.is-disabled的禁用样式*/
.el-button.is-disabled,
.el-button.is-disabled:hover,
.el-button.is-disabled:focus,
.el-button.is-disabled:active,
.el-button.is-loading {
  opacity: 0.4;
}

/* 本组件样式 */
.wrap {
  width: 100%;
  height: 100%;
  // padding: 0 0 20px 0;
  display: flex;
  z-index: 100;
  // background-color: #F2F6FC;
  box-sizing: border-box;
  margin-left: 56px;

  .panel-left {
    flex-shrink: 0;
    position: relative;
    width: 240px;
    height: 100%;
    // border-right: 1px solid #dcdcdc;

    // border: 1px solid #DCDFE6;
    background-color: #F2F6FC;
    // border: 1px solid rgba(58, 244, 245, 0.2);
    // margin-right: 20px;
  }

  .panel-center {
    // border: 1px solid rgba(58, 244, 245, 0.2);
    // margin-right: 20px;
    height: 100%;
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    background-color: #F2F6FC;
    flex: 1;

    .tool-bar {
      height: 46px;
      display: flex;
      align-items: center;
      // border-bottom: 1px solid rgba(58, 244, 245, 0);
      background-color: rgba(44, 254, 255, 0);
    }

    .x6-graph-box {
      overflow: hidden;
      position: absolute;
      top: 46px;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .x6-graph-container {
      width: 100%;
      height: 100%;
    }

    .bottom-result {
      position: fixed;
      left: 0;
      margin-left: 296px;
      right: 0;
      margin-right: 314px;
      bottom: 0;
      // height: 30%;
      background: #1A1E2C;
      // overflow-y: auto;

      .handle-btn {
        position: absolute;
        right: 20px;
        top: 10px;
        // background: red;
        width: 24px;
        height: 24px;
        z-index: 2;
      }

      .el-loading-mask {
        background: rgba(#1A1E2C, .9)
      }

      .el-table {
        background: #1A1E2C;

        .el-table__body-wrapper {
          .el-table__body {
            width: 100% !important;
          }

          &::-webkit-scrollbar {
            width: 8px;
          }

          /* 滚动槽 */
          &::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
          }

          /* 滚动条滑块 */
          &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.1);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
          }

          &::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(0, 0, 0, .06);
          }
        }
      }
    }
  }

  .panel-right {
    // border: 1px solid rgba(58, 244, 245, 0);
    flex-shrink: 0;
    height: 100%;
    width: 350px;
    background-color: #F2F6FC;
    box-sizing: border-box;
    overflow: hidden;

    .right-content {
      height: 100%;
      padding: 32px 16px;
      box-sizing: border-box;

      .el-tab-pane {
        height: 100vh !important;
      }

      .el-icon-info {
        margin-right: 10px;
        color: #468ff4;
      }

      .el-tab-pane {
        .items {
          .widget {
            .widget-title {
              color: #333;
              line-height: 2em;
            }

            .val.el-input,
            .val.el-textarea {
              width: 100%;
            }

            .el-input__inner,
            .el-input-number__decrease,
            .el-input-number__increase {
              height: 30px;
              line-height: 30px;
            }

            .val.el-select {
              width: auto !important;

              // .el-input__suffix {
              //   right: 18px;
              // }

              // .el-input__prefix,
              // .el-input__suffix {
              //   top: -4px;
              // }
            }
          }
        }
      }

      .el-tabs__content {

        .el-form-item__label {
          line-height: 2em !important;
        }

        .el-input__inner,
        .el-textarea__inner {
          width: 90%;
        }

        .el-input__inner,
        .el-input-number__decrease,
        .el-input-number__increase {
          height: 30px;
          line-height: 30px;
        }
      }
    }

    .el-tabs {
      height: 100%;
    }

    .tips-info {
      color: #468ff4;
    }
  }
}

.x6-graph-scroller {
  background-image: linear-gradient(90deg,
      rgba(180, 180, 180, 0.15) 10%,
      rgba(0, 0, 0, 0) 10%),
    linear-gradient(rgba(180, 180, 180, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
  background-size: 10px 10px;
  overflow: hidden;
  height: 100%;
}

/*去除graph中的线条*/
.x6-graph {
  box-shadow: none !important;
}

.x6-graph-pagebreak-vertical,
.x6-graph-pagebreak-horizontal {
  border: none;
}

.echarts-scatter {
  width: 100%;
  height: 300px;
}